* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

@font-face {
    font-family: electronicFont;
    src        : url(../font/DS-DIGIT.TTF);
}

body {
    background : url(../imgs/b2.png) no-repeat top center;
    line-height: 1.15;
}

header {
    height         : 1.25rem;
    background     : url(../imgs/head_bg.png) no-repeat;
    background-size: 100% 100%;
    position       : relative;

    h1 {
        font-size  : .475rem;
        color      : #ffffff;
        text-align : center;
        line-height: 1rem;
    }

    .showTime {
        position   : absolute;
        right      : .375rem;
        top        : .0625rem;
        line-height: .9375rem;
        color      : #FFFFFF;
        font-size  : .25rem;
    }

    a {
        text-decoration: none;
    }
}

li {
    list-style: none;
}

.mainbox {
    min-width             : 1024px;
    max-width             : 1920px;
    // height          : 300px;
    margin                : 0 auto;
    // background-color   : #7f7f7f;
    padding               : .125rem .125rem 0;
    display               : flex;

    .column {
        flex: 3;
    }

    .column:nth-child(2) {
        flex  : 5;
        margin: 0 .125rem .1875rem;
    }

    .panel {
        position              : relative;
        height                : 3.875rem;
        // background-color: pink;
        // border             : 1px solid rgba(25, 186, 139, 0.17);
        background            : url(../imgs/line.png) rgba(255, 255, 255, 0.04);
        background-size       : 100% 100%;
        padding               : 0 .1875rem .5rem;
        margin-bottom         : .1875rem;

        // &::before {
        //     position   : absolute;
        //     top        : 0;
        //     left       : 0;
        //     height     : 10px;
        //     width      : 10px;
        //     border-top : 2px solid #02a6b5;
        //     border-left: 2px solid #02a6b5;
        //     content    : "";
        // }

        // &::after {
        //     position    : absolute;
        //     top         : 0;
        //     right       : 0;
        //     height      : 10px;
        //     width       : 10px;
        //     border-top  : 2px solid #02a6b5;
        //     border-right: 2px solid #02a6b5;
        //     content     : "";
        // }

        // .panel-footer {
        //     position        : absolute;
        //     left            : 0;
        //     bottom          : 0;
        //     width           : 100%;
        //     background-color: pink;

        //     &::before {
        //         position     : absolute;
        //         left         : 0;
        //         bottom       : 0;
        //         height       : 10px;
        //         width        : 10px;
        //         border-left  : 2px solid #02a6b5;
        //         border-bottom: 2px solid #02a6b5;
        //         content      : "";
        //     }

        //     &::after {
        //         position     : absolute;
        //         bottom       : 0;
        //         right        : 0;
        //         height       : 10px;
        //         width        : 10px;
        //         border-bottom: 2px solid #02a6b5;
        //         border-right : 2px solid #02a6b5;
        //         content      : "";
        //     }
        // }

        h2 {
            height       : .3rem;
            color        : #fff;
            line-height  : .3rem;
            text-align   : left;
            font-size    : .25rem;
            font-weight  : 400;
            // margin-top: 0;
            // position: absolute;
            // top: 0;
        }

        .chart {
            height             : 3rem;
            // background-color: #808080;
        }

    }

    .no {
        background: rgba(101, 132, 226, 0.1);
        padding   : .0875rem;


        .no-hd {
            position: relative;
            border  : 1px solid rgba(25, 186, 139, 0.17);

            ul {
                display: flex;

                li {
                    position   : relative;
                    flex       : 1;
                    line-height: 1rem;
                    font-size  : .875rem;
                    color      : #ffeb7b;
                    text-align : center;
                    font-family: "electronicFont";

                    &::after {
                        position  : absolute;
                        top       : 25%;
                        right     : 0;
                        content   : "";
                        height    : 50%;
                        width     : 1px;
                        background: rgba(255, 255, 255, 0.2);
                    }
                }


            }

            &::before {
                position   : absolute;
                top        : 0;
                left       : 0;
                height     : 10px;
                width      : 30px;
                border-top : 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
                content    : "";
            }

            .panel-footer {
                position        : absolute;
                left            : 0;
                bottom          : 0;
                width           : 100%;
                background-color: pink;

                &::after {
                    position     : absolute;
                    bottom       : 0;
                    right        : 0;
                    height       : 10px;
                    width        : 30px;
                    border-bottom: 2px solid #02a6b5;
                    border-right : 2px solid #02a6b5;
                    content      : "";
                }
            }

        }

        .no-bd {
            ul {
                display: flex;

                li {
                    flex       : 1;
                    text-align : center;
                    color      : rgba(255, 255, 255, 0.7);
                    font-size  : .225rem;
                    height     : .5rem;
                    line-height: .5rem;
                    padding-top: .05rem;
                }
            }
        }

    }
}

.map {
    position: relative;
    height  : 10.125rem;

    .map1 {
        width          : 6.475rem;
        height         : 6.475rem;
        position       : absolute;
        top            : 50%;
        left           : 50%;
        transform      : translate(-50%, -50%);
        background     : url(../imgs/map.png);
        background-size: 100% 100%;
        filter         : opacity(0.3);
    }

    .map2 {
        position       : absolute;
        top            : 50%;
        left           : 50%;
        transform      : translate(-50%, -50%);
        width          : 8.0375rem;
        height         : 8.0375rem;
        background     : url(../imgs/lbx.png);
        background-size: 100% 100%;
        opacity        : 0.5;
        animation      : rotate1 15s linear infinite;
    }

    .map3 {
        position       : absolute;
        top            : 50%;
        left           : 50%;
        transform      : translate(-50%, -50%);
        width          : 7.075rem;
        height         : 7.075rem;
        background     : url(../imgs/jt.png);
        background-size: 100% 100%;
        animation      : rotate2 10s linear infinite;
        opacity        : 0.65;
    }

    @keyframes rotate1 {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @keyframes rotate2 {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        to {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }

    .chart {
        position           : absolute;
        top                : 0;
        left               : 0;
        width              : 100%;
        height             : 10.125rem;
        // background-color: pink;
    }

}